<script setup>

import {reactive, ref} from "vue";

//基本数据
let name = "张三"
let age = 18

//对象数据
let car = reactive({
  brand: "奔驰",
  price: 777
})

let flag = ref(false)

//定义列表
let fruits = ["苹果", "香蕉", "梨子"]

//定义事件回调
function buy() {
  alert("购买成功");
  flag.value = true;
}

//定义url地址
let url = "http://www.baidu.com"
</script>

<template>
  <h2>基础核心语法</h2>

  <p> name: {{ name }} </p>
  <p> age: {{ age }} </p>
  <div style="border: 3px solid red">
    <p>品牌：{{ car.brand }}</p>
    <p>价格：{{ car.price }}</p>
  </div>
  <button v-on:click="buy">购买</button>
  <button @click="buy">购买</button>

  <div>
    <span v-if="flag" style="background-color: green">if条件成立</span>
    <span v-else style="background-color: red">if条件不成立</span>
  </div>

  <div>
    <ul>
      <li v-for="(item,index) in fruits">{{ (index + 1) + '.' + item }}</li>
    </ul>
  </div>

  <div>
    <a v-bind:href="url">go</a><br>
    <a :href="url">go</a>
  </div>
</template>

<style scoped>

</style>